<template>
	<!-- <view>
		<view class="image-content"
			style="display: flex; justify-content: center;  align-items: center; height: 80vh;flex-direction: column;">
			<image style="width: 150px; height: 150px; background-color: #eeeeee;border-radius: 100px;" :src="src">
			</image>
			<view class="" style="margin-top: 20px;font-size: 18px;    font-weight: 900;">
				梦何电商
			</view>
		</view>
	</view> -->
	<view class="mine">
		<view class="box1" v-if="showBox==1">
			<view class="btn" @click="showBox=2">登录</view>
		</view>
		<view class="box2" v-else-if="showBox==2">
			<view class="item">
				<text>账号：</text>
				<u--input
				    placeholder="请输入账号"
				    border="surround"
					clearable
				    v-model="username"
				  ></u--input>
			</view>
			<view class="item">
				<text>密码：</text>
				<u--input
				    placeholder="请输入密码"
					type="password"
				    border="surround"
					clearable
				    v-model="password"
				  ></u--input>
			</view>
			<view class="btns">
				<view class="btn1" @click='login()'>登录</view>
				<view class="btn2" @click="showBox=3">注册</view>
			</view>
		</view>
		<view class="box3" v-else-if="showBox==3">
			<view class="item">
				<text>账号：</text>
				<u--input
				    placeholder="请输入账号"
				    border="surround"
					clearable
				    v-model="registerUser.username"
				  ></u--input>
			</view>
			<view class="item">
				<text>密码：</text>
				<u--input
				    placeholder="请输入密码"
					type="password"
				    border="surround"
					clearable
				    v-model="registerUser.password"
				  ></u--input>
			</view>
			<view class="item">
				<text>确认：</text>
				<u--input
				    placeholder="请输入确认密码"
					type="password"
				    border="surround"
					clearable
				    v-model="registerUser.rePassword"
				  ></u--input>
			</view>
			<view class="item">
				<text>姓名：</text>
				<u--input
				    placeholder="请输入账号"
				    border="surround"
					clearable
				    v-model="registerUser.realName"
				  ></u--input>
			</view>
			<view class="item">
				<text>性别：</text>
				<u-radio-group 
				    v-model="registerUser.gender"
				    placement="row">
					<u-radio name=0 activeColor="red" label="男" ></u-radio>
					<u-radio name=1 activeColor="red" label="女"></u-radio>
				</u-radio-group>
			</view>
			<view class="item">
				<text>电话：</text>
				<u--input
				    placeholder="请输入账号"
				    border="surround"
					clearable
				    v-model="registerUser.phone"
				  ></u--input>
			</view>
			<view class="item">
				<text>邮箱：</text>
				<u--input
				    placeholder="请输入账号"
				    border="surround"
					clearable
				    v-model="registerUser.email"
				  ></u--input>
			</view>
			<view class="btns">
				<view class="btn1" @click='register()'>注册</view>
				<view class="btn2" @click="showBox=2">返回</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				username:'',
				password:'',
				showBox: 1,
				src: "../../static/logo.png",
				registerUser: {
					username:'',
					password:'',
					rePassword:'',
					realName:'',
					phone:'',
					email:'',
					gender:''
				}
			}
		},
		onLoad() {
			// this.loginAndRegister()
		},
		methods: {
			// login() {
			// 	const that = this;
			// 	uni.login({
			// 		provider: 'weixin', //使用微信登录
			// 		success: function(loginRes) {
			// 			console.log(loginRes);
			// 			that.apis.login({

			// 			}, {
			// 				code: loginRes.code
			// 			}).then(res => {
			// 				console.log(res)
			// 			}).catch(err => {
			// 				console.log(err)
			// 				if (err.code == 20004) { //用户不存在
			// 					that.register()
			// 				}
			// 			})
			// 		}
			// 	});
			// },
			// loginAndRegister() {
			// 	const that = this;
			// 	uni.login({
			// 		provider: 'weixin', //使用微信登录
			// 		success: function(loginRes) {
			// 			console.log(loginRes);
			// 			that.apis.register({
			// 				code: loginRes.code
			// 			}).then(res => {
			// 				console.log(res, "登录注册")
			// 				uni.setStorageSync("uid", res.userId)
			// 				uni.setStorageSync("token", res.access_token)
			// 				uni.setStorageSync("user", res)
			// 			}).then(res => {
			// 				//配置信息
			// 				return that.apis.config()
			// 			}).then(res => {
			// 				uni.setStorageSync("config", res)
			// 				//当前用户店铺信息
			// 				that.apis.myShop().then(res => {
			// 					uni.setStorageSync("shop", res)
			// 					uni.navigateBack()
			// 				})
			// 			})
			// 		}
			// 	});
			// },
			//会员注册
			register(){
				this.apis.registerMember(this.registerUser).then(res => {
					this.showBox=2
				})
			},
			//会员登录
			login(){
				this.apis.loginMember({username:this.username,password:this.password}).then(res => {
					console.log(res)
					uni.setStorageSync("uid", res.member.id)
					uni.setStorageSync("token", res.accessToken)
					uni.setStorageSync("user", res.member)
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.mine{
		.box1{
			height: 300rpx;
			background: #2c8283;
			display: flex;
			justify-content: center;
			align-items: center;
			.btn{
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: white;
				border: 1px solid white;
				border-radius: 4px;
			}
		}
		.box2{
			.item{
				display: flex;
				align-items: center;
				padding: 0 20px;
				margin: 10px 0;
			}
			.btns{
				display: flex;
				justify-content: center;
				padding: 0 20px;
				.btn1{
					border: 1px solid #369;
					padding: 4px 16px;
					border-radius: 4px;
					color: #369;
					margin-right: 10px;
				}
				.btn2{
					border: 1px solid #369966;
					padding: 4px 16px;
					border-radius: 4px;
					color: #369966;
				}
			}	
		}
		.box3{
			.item{
				display: flex;
				align-items: center;
				padding: 0 40rpx;
				margin: 10px 0;
			}
			.btns{
				display: flex;
				justify-content: center;
				padding: 0 20px;
				.btn1{
					border: 1px solid #369;
					padding: 4px 16px;
					border-radius: 4px;
					color: #369;
					margin-right: 10px;
				}
				.btn2{
					border: 1px solid #369966;
					padding: 4px 16px;
					border-radius: 4px;
					color: #369966;
				}
			}
		}
	}

</style>
